<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>颜色</title>
	</head>
	<style>
		.main{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
		}
		.model{
			width: 100px;
			height: 50px;
			margin: 10px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			border-radius: 8px;
			display: flex;
			justify-content: center; /* 水平居中 */
			align-items: center; /* 垂直居中 */
		}
		.color{
			background-color: #2d8cf0;
		}
		.color1{
			background-color: #409EFF;
		}
		.color2{
			border: 1px solid #DCDFE6;
		}
		.color3{
			background-color: #F56C6C;
		}
		.color4{
			background-color: rgb(102, 177, 255);
		}
	</style>
	<body>
		<div class="main">
			<div class="model color">
				
			</div>
			<div class="model color1">
				
			</div>
			<div class="model color2">
				
			</div>
			<div class="model color3">
				
			</div>
			<div class="model color4">
				
			</div>
			<div class="model color5">
				font
			</div>
		</div>
	</body>
</html>